* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Nunito, sans-serif";
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.navbar {
  width: 90%;
  margin: auto;
}

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.nav-container {
  padding: 20px 0;
}

.nav-container h2 {
  color: rgb(29, 29, 29);
}

.nav-container .nav {
  justify-self: flex-end;
  display: flex;
}

.nav-container .nav a {
  margin: 0 20px;
  color: black;
}

.nav-container .nav .active {
  background: #333;
  color: white;
  padding: 10px 20px;
  border-radius: 30px;
}

.header {
  width: 80%;
  margin: 70px auto;
}

.container img {
  width: 100%;
}

.container div h3 {
  font-size: 70px;
}

.container div h3::after{
  content: "";
  position: absolute;
  background: rgb(23,125,165);  
  height: 3px;
  width: 150px;
  top: 49%;
  left: 10%;
}

.container div p {
  margin: 20px 0;
}

.container div a {
  padding: 15px;
  background: #333;
  margin: 20px 0;
  display: inline-block;
  color: #fff;
  border-radius: 10px;
}

.headphone {
  position: absolute;
  top: -10%;
  left: 5%;
  opacity: .1;
  z-index: -1;
}

.footer {
  margin: 100px 0 0 0;
  background: #333;
  padding: 100px 100px;
}

.footer .main-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2rem;
}

.main-container div h4 {
  color: rgb(41, 100, 177);
  font-size: 25px;
  margin: 10px 0;
}

.main-container div li {
  cursor: pointer;
  margin: 3px 0;
}

hr{
  margin: 20px 0;
  opacity: .4;
}